<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .box {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto 0;
            overflow: hidden;
            position: relative;
        }

        .box .zhu {
            width: 3500px;
            height: 300px;

            position: relative;
        }

        .zhu li {
            width: 500px;
            height: 300px;
            position: relative;
            float: left;
            color: #fff;
            font-size: 50px;
            text-align: center;
            user-select: none;
        }

        .xiao {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .xiao li {
            float: left;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            font-size: 20px;
            background: greenyellow;
            margin-right: 5px;
            cursor: pointer;
            user-select: none;
        }

        .but-box {
            position: absolute;
            top: 45%;
            color: #fff;
            font-size: 20px;
            text-align: center;
            width: 100%;
        }

        .but-box div {
            width: 30px;
            height: 30px;
            background-color: yellowgreen;
        }

        .but-box .btl {
            float: left;
            user-select: none;
            cursor: pointer;
            border-radius: 0px 20px 20px 0px;
        }

        .but-box .btr {
            float: right;
            user-select: none;
            border-radius: 20px 0px 0px 20px;
            cursor: pointer;
        }

        .xiao .v1 .act {
            background: violet;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="zhu">
            <li style="background: #111111;">1</li>
            <li style="background: #222;">2</li>
            <li style="background: #333;">3</li>
            <li style="background: #444;">4</li>
            <li style="background: #555;">5</li>
            <li style="background: #666;">6</li>
        </ul>
        <div class="but-box">
            <div class="btl">&lt;</div>
            <div class="btr">&gt;</div>
        </div>
        <div class="xiao">
            <ul class="v1"></ul>
        </div>
    </div>

    <!-- <script src="../js/utils.js"></script> -->
    <script src="../js/1.js"></script>
    <script>
        let box = document.querySelector(".box");
        let ul = document.querySelector(".zhu");
        let zl = document.querySelectorAll(".zhu li");
        let xiao = document.querySelector(".xiao")
        let v1 = document.querySelector(".v1");
        let btn = document.querySelector(".btl");
        let btm = document.querySelector(".btr");
        let ii = 0;
        let panduan = true;
        let chu = () => {
            zl.forEach((item, index) => {
                if (index === 0) {
                    v1.innerHTML = `<li class="act">${index + 1}</li>`
                    return
                }
                v1.innerHTML += `<li>${index + 1}</li>`
            })
        }
        chu()
        let dibu = v1.querySelectorAll("li")
        let last = zl[0].cloneNode(true)
        ul.appendChild(last)
        zl = document.querySelectorAll(".zhu li");
        let timer;
        autoPlay()
        // 渲染下方

        box.onmouseover = () => {
            clearInterval(timer)
        }
        box.onmouseout = () => {
            autoPlay()
        }



        btn.onclick = () => {
            if (panduan) {
                panduan = false;
                ii--
                if (ii < 0) {
                    ii = zl.length - 1;
                    ul.style.left = ii * (-500) + "px";
                    ii--;
                    bian(ul, { left: ii * (-500) })
                }
                act()
                bian(ul, { left: ii * (-500) }, function () {
                    panduan = true
                    if (ii === 0) {
                        ii = zl.length - 1
                        ul.style.left = ii * (-500) + "px"
                    }
                })
            }
        }

        btm.onclick = () => {
            if (panduan) {
                panduan = false;
                ii++;
                act()
                console.log(ii)
                bian(ul, { left: ii * (-500) }, function () {
                    panduan = true
                    if (ii === zl.length - 1) {
                        ii = 0
                        ul.style.left = "0px"
                    }
                })
            }
        }

        function autoPlay() {

            timer = setInterval(() => {
                ii++;
                act()
                bian(ul, { left: ii * (-500) }, function () {
                    if (ii >= zl.length - 1) {
                        ii = 0;
                        ul.style.left = "0px"
                    }
                })
            }, 1300)
        }

        function act() {
            for (let a of dibu) {
                a.className = ""
            }
            if (ii + 1 == dibu.length + 1) {
                dibu[0].className = "act"
            }
            else {
                dibu[ii].className = "act"
            }
        }
        function dianji() {
            let ab = dibu.length;
            dibu.forEach((item, index) => {
                item.onclick = () => {

                    if (index == ab) {
                        ii = 0
                    } else {
                        ii = index - 1;
                    }

                }
            })
        }
        dianji()
        act()

        // 离开页面
        function pageChange() {
            document.addEventListener('visibilitychange', () => {
                if (document.visibilityState === 'hidden') {
                    clearInterval(timer)
                } else if (document.visibilityState === 'visible') {
                    autoPlay(ii)
                }
            })
        }
        pageChange()
    </script>
</body>

</html>